<template>
  <div class="container">
    <div>
      <img src="../../static/img/back.jpg" alt="">
    </div>
    <div>
      <h1 style="margin-left: 80px">管理员登录</h1>
      <el-form :label-position="labelPosition" status-icon :rules="rules" label-width="80px" :model="formLabelAlign" ref="formLabelAlign">
        <el-form-item prop="username">
          <el-input v-model="formLabelAlign.username" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="formLabelAlign.password" placeholder="密码" type="password"></el-input>
        </el-form-item>
        <el-form-item prop="auth" class="auth">
          <div style="display:flex">
            <el-input v-model="formLabelAlign.auth" placeholder="验证码"></el-input>
            <span v-html="this.authPic" @click="changeAuth"></span>
          </div>
        </el-form-item>
        <div class="register" @click="register">点我注册</div>
        <div class="submitCon">
          <el-button type="primary" @click="submit">登录</el-button>
        </div>
    </el-form>
    </div>
  </div>
</template>

<script>
/**
 * 在前端使用的axios ， 用来发起网络请求
 */
import axios from "axios"
// 这个东西是允许跨域的时候加上session
axios.defaults.withCredentials = true;

export default {
  name: 'HelloWorld',
  data () {
    return {
      labelPosition: 'right',
      formLabelAlign: {
          username: '',
          password: '',
          auth: ''
        },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        auth: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      },
      authPic: ''
    }
  },
  async mounted() {
    // 首先， 在使用这个网络请求的时候 ， 需要注意的前端和后端发送请求的端口需要一致
    // 浏览器的同源策略 ， 指的是协议 ， IP地址 ， 端口号 都一致的时候的才算是同源 ， 如果不同源的请求之间会存在跨域问题
    /**   解决跨域问题：
     *       服务器代理 
     *  koa2的解决方案 ， 在koa中安装 ， koa-cos
    */
   //---------------------------------------------------
    let result = await this.$axios.get("/getAuth");
    console.log(result);
    this.authPic = result.data.data;
  },
  methods: {
    async submit() {
      let result = await this.$axios.post("/submit", {username: this.formLabelAlign.username , password: this.formLabelAlign.password , auth: this.formLabelAlign.auth});
      if(result.data.type === "success") {
        this.$message({
          message: result.data.message,
          type: "success"
        }); 
        this.$router.push({name: "Home"}) 
        console.log(result.data);
        window.localStorage.setItem("token", result.data.token);
        window.localStorage.setItem("user", JSON.stringify(result.data.userInfo));
      } else if(result.data.type === "error") {
        this.$message.error(result.data.message)
        this.changeAuth();
      }
    },
    async changeAuth() {
      let result = await this.$axios.get("/getAuth");
      this.authPic = result.data.data;
    },
    register() {
      this.$router.push({name: "singin"});
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.buttonContainer {
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.el-table {
  width: 80%;
  margin: auto;

}
/* th {
  width: 33%;
  text-align: center;
} */
.cell {
  text-align: center;
}
.container {
  display: flex;

  margin-top: 50px;
}

.authPic svg {
  height: 2em;
}
.submitCon {
  widows: 100%;
  margin-left: 80px;
  text-align: none;
}
.submitCon button {
  width: 100%;
}

.register {
  /* width: 100%; */
  text-align: right;
  font-size: 14px;
  color: blue;
  cursor: pointer;
  margin-bottom: 5px;
}
</style>
